<template>
	<view>
		<view class="group">
			<view class="group-item" v-for="(item,index) in orderList" :key="index">
				<view class="group-item-a">
					<view>参与了拼团</view>
					<text>{{item._status._title}}</text>
				</view>
				<view class="group-item-b">{{item._pay_time}}</view>
				<view class="group-item-c" v-for="(itemA,indexA) in item.cartInfo" :key="indexA">
					<image :src="itemA.productInfo.image" mode=""></image>
					<view class="goods-details">
						<view class="goods-details-title">{{itemA.productInfo.store_name}}</view>
						<view class="goods-details-num">
							<view>￥{{itemA.productInfo.price}}</view>
							<!-- <text>2人拼团</text> -->
						</view>
					</view>
				</view>
			</view>
			
			<view class="noCart" v-if="orderList.length == 0">
				<view class="pictrue">
					<image src="/static/images/no-thing.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api/order.js';
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				orderList: []
			}
		},
		onLoad() {
			this.getOrderList();
		},
		methods: {
			/**
			 * 获取订单列表
			 */
			getOrderList: function() {
				let that = this;
				getOrderList({
						page: that.page,
						limit: that.limit,
						order_type: 2
					})
					.then(res => {
						let list = res.data;
						that.orderList = that.orderList.concat(res.data)
						if(list.length > 0){
							that.page = that.page + 1;
						}
					})
					.catch(err => {

					});
			},
		},
		onReachBottom: function() {
			this.getOrderList();
		}
	}
</script>

<style lang="less">
	.group {
		padding: 20rpx 0;

		.group-item {
			padding: 28rpx 32rpx 50rpx;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;

			.group-item-a {
				display: flex;
				justify-content: space-between;

				view {
					font-size: 30rpx;
					color: #1C1C1C;
					line-height: 1;
					font-weight: 600;
				}

				text {
					display: block;
					font-size: 30rpx;
					color: #DD4134;
					line-height: 1;
					font-weight: 600;
				}
			}

			.group-item-b {
				font-size: 24rpx;
				color: #828282;
				line-height: 1;
				padding: 10rpx 0;
			}

			.group-item-c {
				padding: 12rpx;
				background-color: #f0f0f0;
				border-radius: 10rpx;
				display: flex;

				image {
					display: block;
					width: 132rpx;
					height: 132rpx;
					border-radius: 10rpx;
				}

				.goods-details {
					width: 530rpx;
					padding: 0 50rpx 0 10rpx;

					.goods-details-title {
						font-size: 24rpx;
						color: #2E2E2E;
						line-height: 33rpx;
					}

					.goods-details-num {
						display: flex;
						padding-top: 30rpx;
						line-height: 36rpx;

						view {
							font-size: 30rpx;
							color: #2E2E2E;
							font-weight: 600;
						}

						text {
							display: block;
							font-size: 24rpx;
							color: #747474;
							padding-left: 20rpx;
						}
					}
				}

			}
		}

	}
	
	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;
	}
	
	.noCart .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}
	
	.noCart .pictrue image {
		width: 100%;
		height: 100%;
	}
</style>
